<template>
  <view class="productDetailWp">
    <view class="bannerWp" v-if="fileListImg.length!=0 && fileListImg">
      <view class="banner">
        <u-swiper keyName="filePath" indicator height='300' circular radius='20' :list="fileListImg"></u-swiper>
      </view>
    </view>
    <view class="paddingBar" v-if="fileListImg.length!=0 && fileListImg">
    </view>
    <view class="videoWp" v-if="video && !wxCheckType">
      <video :src="video" controls></video>
    </view>
    <view class="productTitleWp">
      <u-parse :content="content"></u-parse>
    </view>


    <view class="bottomBarWp" v-if="canBuy">
      <view class="bottomBar">
        <view class="shareWp">
          <img src="https://file.casugn.com/storecompcard/temp/分享 (1)@2x_1655446118140.png" alt="">
          <view class="text">
            分享
          </view>
          <button openType="share" border='none' class="shareBtn">
          </button>
        </view>
        <view class="adWp">
          <u-button @click="goToBuy" type="primary" shape="circle" color="#7b77fe" text="购买"></u-button>
        </view>
      </view>
    </view>
    <u-empty v-if="!fileListImg ||!content" mode="data" iconSize="100" textSize="36rpx" marginTop="20rpx">
    </u-empty>
  </view>
</template>

<script>
import {
  mapState,
  mapGetters
} from 'vuex'

export default {
  components: {},
  data() {
    return {
      fileListImg: [],
      content: null,
      productData: {},
      defaultProductId: null,
      goodsId: null,
      canBuy: null,
      productTitle: '',
      productId: '',
      productName: '',
      video: '',//视频
    };
  },
  computed: {
    ...mapState(['wxCheckType']),
  },
  onLoad(option) {
    console.log(option, 'option');
    if (option.id) {
      this.productId = option.id
      this.getProductDetail(option.id)
    }
  },
  methods: {
    // 根据 detail_id 获取数据
    async getProductDetail(id) {
      let res = await this.$api.getProductDetaiById(id)
      if (res.success) {
        console.log('根据 detail_id 获取数据', res.result);
        if (res.result.banner != "") {
          let banner = res.result.banner.split(',')
          console.log(banner, 'banner');
          if (banner.length == 1) {
            this.fileListImg.push({
              filePath: banner[0],
              url: banner[0]
            })
          } else {
            this.fileListImg = banner.map(item => {
              let newItem = {
                filePath: item,
                url: item
              }
              return newItem
            })
          }
        }
        this.content = res.result.perfile
        this.defaultProductId = res.result.defaultProductId
        this.goodsId = res.result.goodsId
        this.productName = res.result.name
        this.video = res.result.video
        if (this.defaultProductId && this.goodsId) {
          this.canBuy = true
        } else {
          this.canBuy = false
        }
      } else {
        this.video = ''
        this.content = null
        this.fileListImg = []
        uni.showToast({
          title: res.message,
          icon: 'none'
        });
      }
    },
    //购买商品
    goToBuy() {
      let openId = uni.getStorageSync('openId')
      console.log("这是openId", openId)
      if (!openId) {
        return uni.showToast({
          title: '请先创建名片',
          icon: 'none'
        });
      }
      wx.navigateToMiniProgram({
        appId: 'wxf5b2071cea9a5289',
        path: "standard/product/detail",
        extraData: {
          // 跳转其他小程序携带的参数
          "productId": this.defaultProductId,
          "goodsId": this.goodsId,
          "openId": openId.openid,
          "unionId": openId.unionid,
          "flag": "1"
        },
        success(res) {
          // 打开成功
          console.log('跳转成功', res)
        },
        fail: err => {
          console.log('跳转失败', err);
        },
      })
    },


  },
  onShareAppMessage() {
    return {
      title: `${this.productName ? this.productName : ''}`,
      path: '/pagesCard/productDetail/productDetail?id=' + this.productId
    }
  },
  onShareTimeline() {
    return {
      title: `${this.productName ? this.productName : ''}`,
      path: '/pagesCard/productDetail/productDetail?id=' + this.productId
    }
  }

}
</script>

<style lang="scss">
.productDetailWp {
  margin: 30upx;

  .paddingBar {
    background-color: #F8F9FF;
    height: 30upx;
    width: 100%;
  }

  .bannerWp {
    padding-bottom: 30upx;
  }

  .videoWp {
    margin: 20upx 0;

    video {
      width: 100%;
      border-radius: 10upx;
    }
  }

  .tagsWp {
    display: flex;
    padding-bottom: 50upx;

    .tagItem {
      margin-right: 20upx;
      font-size: 20upx;
      font-weight: 400;
      color: #423CFE;
    }
  }

  .productTitleWp {
    padding-bottom: 50upx;

    .title {
      padding-bottom: 30upx;
      font-size: 36upx;
      font-weight: 500;
      color: #333333;
    }

    .titleInfoWp {
      margin: 0 auto;

      .titleInfo {
        font-size: 30upx;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .introductionWp {
    padding-bottom: 30upx;

    .introductionTitle {
    }

    .introductionListWp {

      .introductionItem {
        height: 100upx;
        background: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.4);
        border-radius: 30upx;
        display: flex;
        align-items: center;
        padding: 12upx 18upx;
        margin: 20upx 0;

        .imgWp {
          width: 77upx;
          height: 77upx;
          margin-right: 30upx;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .text {
          flex: 1;
        }
      }
    }
  }

  padding-bottom: 120upx;
}

.bottomBarWp {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  margin-top: 80upx;
  border-top: 1upx solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;

  .bottomBar {
    padding: 30upx 0;
    width: 585upx;
    display: flex;

    .shareWp {
      position: relative;
      flex: 1;
      text-align: center;

      img {
        width: 29upx;
        height: 23upx;
      }


      .text {
        font-size: 22upx;
        font-weight: 400;
        color: #333333;

        .sharpText {
          font-size: 22upx;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    .hotLine {
      text-align: center;
      flex: 1;

      img {
        width: 28upx;
        height: 24upx;
      }

      .text {
        font-size: 22upx;
        font-weight: 400;
        color: #333333;
      }
    }

    .adWp {
      flex: 2;

      .text1 {
        text-align: center;
        font-size: 24upx;
        font-weight: 400;
        color: #423CFE;
        padding-bottom: 20upx;
      }

      .text2 {
        text-align: center;
        font-size: 20upx;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}

.shareBtn {
  position: absolute;
  top: 0;
  left: 14rpx;
  width: 120upx;
  height: 70upx;
  opacity: 0;
  z-index: 5;
  background-color: red;
}
</style>
